<template>
  <div class="login-page">
    <div class="content">
      <h3>欢迎登录后台管理系统</h3>
      <el-form
        ref="ruleFormRef"
        :model="loginService.ruleForm"
        :rules="loginService.rules"
        class="demo-ruleForm"
        size="large"
      >
        <el-form-item prop="username">
          <el-input
            v-model="ruleForm.username"
            :readonly="readonly"
            placeholder="请输入用户名"
            @click="readonly = false"
          >
            <template #prefix>
              <el-icon class="iconfont icon-yonghuming"><calendar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="password" prop="password">
          <el-input
            v-model="ruleForm.passwd"
            type="password"
            placeholder="请输入密码"
          >
            <template #prefix>
              <el-icon class="iconfont icon-mima"><calendar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-btn"
            type="primary"
            @click="loginService.submitForm()"
            :loading="loginLoading"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script  setup lang='ts'>
import { LoginService } from "../ts/service/login/login.service";
const loginService = new LoginService();
const { readonly, ruleForm, loginLoading, ruleFormRef, $router } =
  loginService.useService();
</script>
<style lang='scss' scoped>
.login-page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/images/login/login-bg.jpg");

  .content {
    box-shadow: var(--el-box-shadow-dark);
    background: #fffb;
    width: 400px;
    height: 400px;
    border-radius: 4px;
    padding: 45px;
    box-sizing: border-box;
    font-weight: normal;

    h3 {
      margin: 10px 0 25px 0;
      font-size: 26px;
      text-align: center;
    }
    .el-input {
      height: 52px;
      font-size: 16px;
    }

    .password {
      margin-top: 28px;
      margin-bottom: 36px;
    }
  }
}

.login-btn {
  width: 100%;
  height: 52px;
  font-size: 18px;
  color: #fff;
  background: var(--el-color-primary); //#3853cd;
  font-weight: normal;
}
</style>
